<script setup>
// vue2是选项式的api computed选项  计算属性都写在里面 计算属性是一个有返回值的函数,但是在使用的时候直接当属性使用
// computed: {
//   xxx() {
//     reutrn this. + this.b
//   }
// }
// vue3中的computed
// 计算属性是有缓存的 依赖的值不变,那么就只计算一次,
import {ref, computed} from 'vue'
const scoreList = ref([56,69,77,3,99,100,88])
// 计算属性
const betterList = computed(() => {
  console.log('我是计算属性')
  return scoreList.value.filter((item) => item> 90)
} )
const betterFunc = () => {
  console.log('我是函数执行')
  return scoreList.value.filter((item) => item> 90)
}
// 改变数据,计算属性也改变
setTimeout(() => {
  scoreList.value.push(92,84)
},5000)
</script>

<template>
  <div>
    <p>分数: {{scoreList}}</p>
    <p>优秀: {{betterList}}</p>
    <p>优秀: {{betterList}}</p>
    <p>优秀: {{betterList}}</p>
    <p>函数方式: {{betterFunc()}}</p>
    <p>函数方式: {{betterFunc()}}</p>
    <p>函数方式: {{betterFunc()}}</p>
  </div>
</template>

<style scoped></style>
